<template>
    <div class="markdown-viewer">        
        <div class="markdown-body">
            <xui-markdown :text="mdText"></xui-markdown>
        </div>        
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

import XuiMarkdown from '/@/components/XUII/markdown.vue'
import fs from '/@/services/FileService'

export default defineComponent({
    components: { XuiMarkdown },
    setup () {
        let path = ref<string>('')
        let mdText = ref<string>('')
        return {
            path,
            mdText
        }
    },
    async mounted (){
        let router = useRouter()
        this.path = router.currentRoute.value.query.path as string
        await this.urlChange()
    },
    async beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`        
        this.path = to.query.path as string        
        await this.urlChange()
        next()  
    },
    methods: {
        async urlChange() {
            let paths = this.path.split('/')
            document.title = paths[paths.length-1]
            var text = await fs.getFileText(this.path)    
            this.mdText = text                    
        }
    }
})
</script>
<style lang="scss" scoped>
.markdown-viewer {   
    width: 100%;
    min-height: 100vh;
    display:flex;
    justify-content: center;       
    background-color: #eee;
    padding: 2em;
    .markdown-body {
        padding: 1em;
        background-color: white;
        box-shadow: 20px 20px 40px rgba(0,0,0,0.2);        
    }
    
}
</style>
